<template>
	<view>
		<view class="progress" :class="Type" style="position: relative;">
			<!-- <view class="progress-text" v-if="Vice == true">{{ Width + '%' }}</view> -->
			<view class="progress-bar" :style="{width: Width+'%'}">
				<!-- <view class="progress-text" v-if="Main == true">{{ Width + '%' }}</view> -->
				<!-- <image src="https://terminator.axu9.com/images/jindu-position.png" style="width: 49rpx;height: 51rpx;position: absolute;right: 0;top: 50%;transform: translateY(-50%);" mode=""></image> -->
			</view>
			<image :style="{left: 'calc('+Width+'%'+ ' - 40rpx)'}" src="https://terminator.axu9.com/images/jindu-position.png" style="width: 49rpx;height: 51rpx;position: absolute;top: 50%;transform: translateY(-50%);z-index: 99;" mode=""></image>
			
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 进度条百分比
		Width: {
			type: Number,
			default: 0
		},
		// 进度条样式
		/*
			aqua
			copper
			candy
			neon
			shine
			zigzag
			diamond
			hearts
			sparkle
		*/
		Type: {
			type: String,
			default: 'aqua',
		},
		// 主进度显示百分比
		Main: {
			type: Boolean,
			default: true,
		},
		// 副进度显示百分比
		Vice: {
			type: Boolean,
			default: true,
		},
		
	},
	data() {
		return {

		};
	},
	methods: {}
};
</script>

<style>
@import url('Progress-Bar.css');
</style>
